<template>
    <div class="m-content">
        <h3>欢迎来到巴黎公社部落的博客</h3>
        <div class="block">
            <el-avatar :size="50" :src="user.avatar"></el-avatar>
            <div>{{user.username}}</div>
        </div>
        <div class="maction">
            <span><el-link href="/blogs">主页</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span><el-link href="/blog/add" type="success">发表博客</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span v-show="!hasLogin"><el-link href="/login" type="primary">登录</el-link></span>

            <span v-show="hasLogin"><el-link @click="logout" type="danger">退出</el-link></span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return {
                user:{
                    username:'请先登录',
                    avatar:'https://portrait.gitee.com/uploads/avatars/user/679/2039557_xinhong8156_1586937798.png'
                },
                hasLogin:false
            }
        },
        methods:{
            //退出
            logout(){
                const _this = this;
                _this.$axios.get("/paris/logout",{
                    headers:{
                        "Authorization":localStorage.getItem("token")
                    }
                }).then(res=>{
                    _this.$store.commit("REMOVE_INFO");
                    _this.$router.push("/login");
                    console.log(res)
                })
            }

        },
        created(){
            if (this.$store.getters.getUser.username){
                this.user.username = this.$store.getters.getUser.username;
                this.user.avatar = this.$store.getters.getUser.avatar;

                this.hasLogin =true;
            }
        }
    }
</script>

<style scoped>
.m-content{
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
.maction{
    margin: 10px 0;
}
</style>